<template>
  <div class="member">
    <div class="top">
      <div class="socialTitle clearfix">
        <div class="titleName fl">
          <span>{{title}}</span>
          <span style="color: #00C000;">（{{integral}}）</span>
        </div>
      </div>
      <el-form
        class="main"
        :inline="true"
        :model="form"
        label-width="80px"
        lass="demo-form-inline"
        ref="memberForm"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="会员名称" prop="nickname">
              <el-input v-model="form.nickname" placeholder="请输入会员名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会员ID" prop="memberId">
              <el-input v-model="form.memberId" placeholder="请输入会员ID" clearable></el-input>
            </el-form-item>
          </el-col>
		  <el-col :span="6">
		    <el-form-item label="真实姓名" prop="realName">
		      <el-input v-model="form.realName" placeholder="请输入真实姓名" clearable></el-input>
		    </el-form-item>
		  </el-col>
		  <el-col :span="6" style="text-align: right;">
		    <el-form-item label="手机号码">
		      <el-input v-model="form.telnum" placeholder="请输入手机号码" clearable></el-input>
		    </el-form-item>
		  </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="integral">
			<el-form-item label="只查看对比上一日积分有变动的会员">
			    <el-checkbox-group v-model="form.type">
					<el-checkbox name="type"></el-checkbox>
			    </el-checkbox-group>
			</el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-form-item>
				<a :href="'https://fcapp.fcw-china.com/app/v1/common/selectAllIntegralListDerive'+(form.type.length>0?'?onlyChange=true':'')">
					 <el-button style="width: 100px;" size="small" class="el-icon-download">导出</el-button>
				</a>
              <el-button type="primary" size="small" style="width: 100px;" @click="query()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-box" v-loading="loading">
      <el-table
        class="memberList-table"
        :data="memberList"
        cell-class-name="member-cell"
        header-cell-class-name="member-header"
        :header-cell-style="{ background: '#cae5fa',color: '#727272' }"
        border
        stripe
        style="width: 100%"
        size="small"
      >
        <el-table-column prop="nickname" label="会员名称" align="center">
          <template slot-scope="scope">
            <span
              @click="handleClickNickName(scope.row)"
              style="color: #6b97eb;cursor: pointer;"
            >{{scope.row.nickname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="真实姓名" align="center">
        </el-table-column>
		<el-table-column prop="sex" label="性别" align="center">
		</el-table-column>
		<el-table-column prop="telnum" label="手机号码" align="center">
		</el-table-column>
		<el-table-column prop="birthdate" label="出生日期" align="center">
		</el-table-column>
		<el-table-column prop="cardnum" label="身份证号码" align="center" min-width="100">
		</el-table-column>
		<el-table-column prop="entryIntegral" label="自得累计积分" align="center">
		</el-table-column>
		<el-table-column prop="inviteIntegral" label="邀请累计积分" align="center">
		</el-table-column>
		<el-table-column prop="activityIntegral" label="累计提现积分" align="center">
		</el-table-column>
		<el-table-column prop="totalintegral" label="剩余积分" align="center">
		</el-table-column>
		<el-table-column prop="todayIntegral" label="对比上一日增加积分" align="center">
		</el-table-column>
		
        <el-table-column
          label="操作"
          min-width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <router-link :to="{name: 'integralDetails',params:{id:scope.row.userid}}">
              <el-button
                type="text"
                size="small"
              >查看详情</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      
    </div>
    <div style="padding: 20px 0;">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="total"
          :page-sizes="[10, 20, 30, 50, 100]"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          background
        ></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="1040px">
      <resume-detail
        v-if="dialogVisible"
        :userid="userid"
        :nickName="nickName"
        :isShowTelphone="true"
      ></resume-detail>
    </el-dialog>
  </div>
</template>
<script>
export default {
	components: {
		resumeDetail: () => import("../../../component/resumeDetail/index.vue")
	},
	data() {
		return {
			title: "用户积分总数",
			integral: '',											//积分
			form: {
				nickname: '',										//会员名称,
				memberId: '',										//会员ID
				realName: '',										//真实姓名
				telnum: '',											//手机号码
				type: [],											//积分对比选项
			},
			loading: false,
			memberList: [],
			dialogVisible: false,
			userid: "",
			nickName: "",
			total: 0,
			pageNum: 1,
			pageSize: 10,
		}
    },
	created() {
		this.integral = localStorage.getItem('totalScore');
		this.getDataList();
	},
	methods: {
		// 获取所有数据列表
		getDataList(form){
			let params = {
				type: 1,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			if(form){
				Object.assign(params,form);
			}
			this.$ceshiAxios.post('/v1/common/newIntegralList',params).then(res => {
				console.log(res);
				if(res.data.code === 1){
					let result = res.data.data;
					this.total = Number(result.totalnum);
					this.memberList.splice(0);
					result.integralVos.forEach(item => {
						this.memberList.push(item)
					})
					
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
		},
		// 根据条件查询
		query() {
			let form = {};
			if(this.form.nickname){
				form.nickname = this.form.nickname;
			}
			if(this.form.memberId){
				form.tdaccount = this.form.memberId;
			}
			if(this.form.realName){
				form.username = this.form.realName;
			}
			if(this.form.telnum){
				form.telnum = this.form.telnum;
			}
			if(this.form.type.length != 0){
				form.onlyChange = true;
			}
			this.getDataList(form);
		},
		// 跳转到第几页
		handleCurrentChange(val) {
			this.pageNum = val;
			this.query();
		},
		// 选择每页条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.query();
		},
		// 查看会员详情
		handleClickNickName(row) {
		  console.log(row)
		  this.userid = row.userid;
		  this.nickName = row.nickname;
		  this.dialogVisible = true;
		},
		// 导出
		exportData() {
			let params = {
				type: 0,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}
			if(this.form.type.length>0){
				params.onlyChange = true;
			}
			this.$axios({
				method: "post",
				url: "/app/v1/common/selectAllIntegralListDerive?onlyChange=true",
				// url: "/app/v1/platform/statistic/registerMemberListOut",
				data: params,
				responseType: "blob"
			}).then(res => {
				console.log(res)
				this.download(res);
			}).catch(error => {
				console.log(error);
				this.$message({
					message: "导出失败,请重新操作",
					type: "warning"
				});
			});
		},
		// 下载导出的文档
		download(res) {
			if (!res) {
				return;
			}
			let bob = new Blob([res.data]);
			let fileName = res.headers["content-disposition"].split("=")[1];
			fileName = decodeURI(fileName);
			let url = window.URL.createObjectURL(bob);
			let link = document.createElement("a");
			link.style.display = "none";
			link.href = url;
			link.setAttribute("download", fileName);
			document.body.appendChild(link);
			link.click();
			this.$message({
				message: "导出成功",
				type: "success"
			});
		},
	}
};
</script>
<style scoped>
.member {
  padding: 10px 15px;
}

.top {
  background-color: #fff;
}

.main {
  padding: 20px 20px 0;
}

.table-box {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #fff;
}

.warn-dialog-header {
  font-size: 16px;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #bfbfbf;
}

.warn-dialog-header::before {
  content: "";
  border-left: 8px solid #0064e4;
  margin-right: 10px;
}

.warn-dialog-body {
  box-sizing: border-box;
  padding: 20px;
}

.warn-dialog-body-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.warn-dialog-btn {
  margin-top: 20px;
  text-align: center;
}

.add-msg{
  margin: 20px 0 50px 0;
}
.new-msg{
  margin-top: 30vh;
}
.new-msg .newmsg-header{
  font-size: 14px;margin: 25px 15px;
  font-weight: bold;padding-left: 15px;
  border-left: 5px solid blue;
}
.msg-textarea,.shortmsg{
  width: 96%;
  padding: 10px;
  margin: 10px 2%;
  line-height: 20px;
}
.shortmsg{
	min-height: 200px;
	border-radius: 6px;
	border: 1px solid #DCDFE6;
}
</style>